<template>
  <div class="bless-message">
    <div class="container">
      <img src="../assets/icon/close.png" alt="" class="close" @click="$emit('close_message_box',0)">
      <div class="name">
        <input type="text" name="name" placeholder="您的姓名" v-model="message.name">
      </div>
      <div class="message">
        <textarea type="text" name="message" placeholder="您的祝福" v-model="message.content"></textarea>
        <p style="height: 10%;">{{count}}/266</p>
      </div>
      <div class="love-button message_button"><button @click="$emit('send_message', message)">发送</button></div>
    </div>
  </div>
</template>

<script>
import BlessGiftConfirm from '@/components/'
export default {
  name: 'bless-message',
  data() {
    return {
      message: {
        name: '',
        content: ''
      }
    }
  },
  computed: {
    count: function () {
      return this.message.content.length
    }
  },
  watch: {
    count: function (val) {
      if(val>267){
        this.message.content = this.message.content.substring(0,266)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .bless-message, .name, .message_button {display: flex; align-items: center;justify-content: center;align-content: center;z-index: 999}
  .bless-message {position: fixed; width: 100%; height: 100%; background-color: rgba(90, 67, 152, 0.7);  top: 0;z-index: 9;}
  .container {width: 65%;background: #fff0ef;padding: 2rem;position: relative;}
  .container input::placeholder, .container textarea::placeholder {font-size: 1rem; color: #b4b4b4}
  .name input{width: 85%;height: 4rem;border-radius: 5%; border: #dec852 1px solid;}
  .name, .message{margin-bottom: 1rem;}
  .message { displayheight: 63%;}
  .message textarea, .message p{width: 85%;display:block; margin: 0 auto; color:#b4b4b4;font-size: 1rem; overflow-y: hidden}
  .message textarea {height: 12rem;border-radius: 5%; border: #dec852 1px solid; color: #484848}
  .message_button { height: 25%;}
  .message_button button {font-size: 1.4rem; width: 85%;}
</style>
